import React, { useState, useEffect } from 'react';

const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];

const formatDate = (date: Date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  const weekday = weekDays[date.getDay()];

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds} ${weekday}`;
};

const CurrentDateTime: React.FC = () => {
  const [currentDateTime, setCurrentDateTime] = useState<Date>(new Date());

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentDateTime(new Date());
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  return <span style={{
    fontSize: '16px',
    fontWeight: 'bold',
    color: '#333',
    padding: '8px 12px',
    display: 'inline-block',
    whiteSpace: 'nowrap'
  }}>
    {formatDate(currentDateTime)}
  </span>;
};

export default CurrentDateTime;